feat(web-ui): UI consistency / layout uplifts#5225
Conversation
|
Don't think the security hotspot SonarQube issue is valid tbh, it's literally just flagging |
ReenigneArcher
left a comment
ReenigneArcher
left a comment
There was a problem hiding this comment.
I haven't done a full review yet, but wanted to address your comment.
Bundle ReportChanges will increase total bundle size by 54.99kB (2.31%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: sunshine-esmAssets Changed:
Files in
Files in
Files in
Files in
Files in
Files in
Files in
Files in
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #5225 +/- ##
=========================================
Coverage ? 17.86%
=========================================
Files ? 111
Lines ? 24589
Branches ? 10888
=========================================
Hits ? 4392
Misses ? 16823
Partials ? 3374
Flags with carried forward coverage won't be shown. Click here to find out more. Continue to review full report in Codecov by Harness.
|
ReenigneArcher
force-pushed
the
ui-style-consistency
branch
2 times, most recently
from
7e6fce7 to
9b27a71
Compare
… / loading - Moved `sunshine.css` from `src_assets/common/assets/web/public/assets/css/sunshine.cs` to `src_assets/common/assets/web/sunshine.css` - MOved link refeences for styles from `template_header` to `init.js`
- Fixed `.btn-info` / `.btn-outline-primary` to use theme styling - Fixed `.btn-primary` being blue when clicking in (now themed)
- Updated the hover for dropdown items to actually style properly - Updated `ThemeToggle.vue` to implement it as a 2-column wide dropdown (left dark, right light) - Added translation for `theme_group_light` and `theme_group_dark` - Dropdown arrow rotates now + button is highlighted when open
…input group text colouring
- Allowing for overrides when themes are not contrasting enough between bg and text
…lours instead of `surface`
…ppuccin Mocha` (dark)
…oper palette from `ember` - Moved some of the theme buttons to be in-line with eachother
- Apparently `color-mix` is widely available to use now, so used this instead of setting keyframes
- Felt odd not having any text on this page like the others...
…tead of headers - Created column-based layout, including a split out for General / Encoder tabs - Shortened in-line search to display count
- Prefer `.dataset` over `getAttribute(…)` - `ENCODER_TAB_IDS` should be a `Set`, and use `ENCODER_TAB_IDS.has()` to check existence or non-existence.
Co-authored-by: David Lane <42013603+ReenigneArcher@users.noreply.github.com>
ReenigneArcher
force-pushed
the
ui-style-consistency
branch
from
9b27a71 to
7e25c42
Compare
ReenigneArcher
left a comment
ReenigneArcher
left a comment
There was a problem hiding this comment.
Finally got around to testing this and it looks really good! I did notice some issues, not all from your changes though.
- Not sure exactly where in the css this is coming from, but the release notes sections for Moonlight, Slate, and Midnight themes is not looking very good. Maybe some additional color tweaking needed here.
- This is not be because of your changes, but if you open and close the theme drop down quickly (basically double clicking the "theme" text). It will end up highlighting the text. Can you throw a fix in for this?
- Can you add some padding below the settings boxes? If they are taller than the browser window it ends at the exact bottom of the page with no gap below. Might need this on other pages as well.
- Fixed missing `id` on the `container` div, to make the padding consistent across the pages - Made the `--color-warning-light` styling unique across Moonlight, Slate, and Midnight - Fixed clicking on the theme button highlighting the text
…lient (instead of just a tailwind clone of `Slate` and `Midnight`)
- Set the icon to not be truncated if the cmd is too long - Truncates it now with `...` (still triple-clickable to select whole command) - Added `:title` to allow for hovering over to show it as a browser tooltip
|
@ReenigneArcher Fixed up your points with some small tweaks:
I also fixed up an issue i found with the Apps commands truncating the command icon / not showing. Also, I've got an update to the App cards i was working on while doing this, which moves the command / info to appear when you hover over the App card, and tightens up the spacing around the edit / delete buttons: |
|
|
Thanks! You can include the hover change here as well. |
2 participants
Description
Originally this was just a branch to make styling work, but expanded out a bit 😅
General
sunshine.cssout ofpublic/assets/cssto reliably override the bootstrap defaults for theming correctlyThemes
Dracula,Alucard,Catppuccin Mocha / Latte,Ember Light,Rose Pine / DawnNord/Embertheme styling to conform to their online style guideRandomtheme button-color-on-XXXXto allow for changing text colour for buttons (contrast fixing)Page updates
Apps: Added a background to the toolbar for the apps pageFeatured Apps: Added the toolbar to theAll / Clients / ToolsbuttonsLogout: Themed the logout page to match the the selected themePassword: Added a description for the password pageConfiguration Page
Screenshot
Themes
Dracula / Alucard themes - TwinLens
Catppuccin Mocha / Latte themes - TwinLens
Ember / Ember Light themes - TwinLens
Rose Pine / Rose Pine Dawn themes - TwinLens
Apps page
Featured Apps page
Logout page
Configuration page
Issues Fixed or Closed
Roadmap Issues
Type of Change
Checklist
AI Usage